<template>
  <div class="index_wrap" >
    <div class="editor_header" >
      <div class="editor_header_item" >
        <div class="back_wrap" >
          <img src="~@/static/images/2.svg" class="back_icon" />
        </div>
        <div class="date_text" >未命名_{{ currentDate }}</div>
      </div>
      <div class="editor_list" >
        <div class="editor_item" >
          <img src="~@/static/images/1.svg" class="editor_icon" />
          图表
        </div>

        <div class="editor_item" >
          <img src="~@/static/images/3.svg" class="editor_icon" />
          表格
        </div>

        <div class="editor_item" >
          <img src="~@/static/images/4.svg" class="editor_icon" />
          指标
        </div>

        <div class="editor_item" >
          <img src="~@/static/images/5.svg" class="editor_icon" />
          地图
        </div>

        <div class="editor_item" >
          <img src="~@/static/images/6.svg" class="editor_icon" />
          文字
        </div>

        <div class="editor_item" >
          <img src="~@/static/images/7.svg" class="editor_icon" />
          媒体
        </div>

        <a-divider type="vertical" />

        <div class="editor_item" >
          <img src="~@/static/images/8.svg" class="editor_icon" />
          交互
        </div>

        <div class="editor_item" >
          <img src="~@/static/images/9.svg" class="editor_icon" />
          素材
        </div>

        <div class="editor_item" >
          <img src="~@/static/images/10.svg" class="editor_icon" />
          过滤条件
        </div>
      </div>

      <div class="editor_header_item" >
        <a-button class="default_button" >保存并预览</a-button>
        <a-button type="primary" class="default_button" >保存</a-button>
      </div>
    </div>

    <div class="content_wrap" >
      <!-- 图层配置 -->
      <layer-setting @collapse="countWidth" ref="setting" />
      <!-- 操作区域 -->
      <div class="operation_wrap" :style="{ width: width + 'px' }" >

        <!-- 操作面板 -->
        <operation-panel/>

      </div>
      <!-- 控制面板 -->
      <layer-panel @collapse="countWidth" ref="panel" />
    </div>
  </div>
</template>
<style scoped lang="less" >
@import "index";
</style>
<script>
import moment from 'moment'
export default  {
  data() {
    return {
      currentDate: moment(new Date().getTime()).format('YYYY-MM-DD HH:mm:ss'),
      width: 0
    }
  },
  methods: {
    countWidth() {
      this.width = 0
      this.$nextTick(() => {
        let settingWidth = this.$refs.setting.$el.clientWidth
        let panelWidth = this.$refs.panel.$el.clientWidth
        let width = document.body.offsetWidth
        this.width = width - (settingWidth + panelWidth)
      })
    },
    resize() {
      const that = this
      document.oncontextmenu = new Function("event.returnValue=false");
      window.addEventListener('resize', function () {
        that.countWidth()
      })
    }
  },
  mounted() {
    this.resize()
    this.countWidth()
  }
}
</script>
